<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if</title>
</head>
<body>
<div id="app">
  <h1 v-if="isShow">isShow为true时，显示</h1>
  <h1 v-else="isShow">isShow为false时，显示</h1>


  <h1>推荐使用计算属性方式处理比较复杂的逻辑判断</h1>
  <div>
    <h1 v-if="score>=90">优秀</h1>
    <h1 v-else-if="score>=80">良好</h1>
    <h1 v-else-if="score>=60">及格</h1>
    <h1 v-else>不及格</h1>
  </div>
  <br>
  {{ result }}
</div>


<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow: true,
      score: 90
    },
    computed: {
      result() {
        let resultMessage = "";
        if (this.score >=90) {
          resultMessage = '优秀'
        }else if (this.score >= 80) {
          resultMessage = '良好'
        }else if (this.score >=60 ) {
          resultMessage = '及格'
        }else {
          resultMessage = '不及格'
        }
        return resultMessage

      }
    }
  })
</script>
</body>
</html>
